<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改任务')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-task-edit">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-2 control-label">任务标题：</label>
                <div class="col-sm-9">
                    <input type="text" required maxlength="50" name="taskTitle" id="taskTitle" th:field="*{task.taskTitle}"  class="form-control" placeholder="请输入任务标题" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">执行人员：</label>
                <div class="col-sm-3">
                    <select class="form-control select2-multiple" name="comp" id="comp">
                        <option value="">请选择公司</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <select class="form-control select2-multiple" name="dept" id="dept">
                        <option value="">请选择部门</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <select class="form-control select2-multiple" name="executor" id="executor">
                        <option value="">请选择部门</option>
                        <th:block th:if="${task.executor}!=null">
                            <option th:text="${task.userName}" th:value="${task.executor}" th:field="*{task.executor}"></option>
                        </th:block>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">任务时间：</label>
                <div class="col-sm-9">
                    <div class="input-daterange input-group">
                        <input type="text" class="input-sm form-control" id="datetimepicker-startTime" name="starttime" th:field="*{task.starttime}" placeholder="开始时间" readonly>
                        <span class="input-group-addon">-</span>
                        <input type="text" class="input-sm form-control" id="datetimepicker-endTime" name="endtime" placeholder="结束时间" th:field="*{task.endtime}" readonly>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">任务状态：</label>
                <div class="col-sm-2">
                    <label class="radio-box">
                        <div><input type="radio" checked value="2" th:field="*{task.status}" name="status" style="position: absolute; opacity: 0;"></div>未完成
                    </label>
                </div>
                <div class="col-sm-2">
                    <label class="radio-box" >
                        <div><input type="radio" value="1" th:field="*{task.status}" name="status" style="position: absolute; opacity: 0;"></div>已完成
                    </label>
                </div>
                <div class="col-sm-2">
                    <label class="radio-box">
                        <div><input type="radio" value="0" th:field="*{task.status}" name="status" style="position: absolute; opacity: 0;"></div>已放弃
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">紧急程度：</label>
                <div class="col-sm-2">
                    <label class="radio-box">
                        <div><input type="radio" checked value="0" th:field="*{task.priority}" name="priority" style="position: absolute; opacity: 0;"></div>普通
                    </label>
                </div>
                <div class="col-sm-2">
                    <label class="radio-box"><div>
                        <input type="radio" value="1" name="priority" th:field="*{task.priority}" style="position: absolute; opacity: 0;"></div>紧急
                    </label>
                </div>
                <div class="col-sm-3">
                    <label class="radio-box">
                        <div><input type="radio" value="2" th:field="*{task.priority}" name="priority" style="position: absolute; opacity: 0;"></div>非常紧急
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">上传文件：</label>
                <div class="col-sm-9 ">
                    <input id="filePath" name="file" type="file" multiple th:text="'原文件名：'+${task.file}" th:value="${task.file}" th:field="*{task.file}" class="file-upload form-control " />
                    <input th:id="file" th:value="${task.file}" type="hidden"/><input th:id="fileName" th:value="${task.fileName}" type="hidden"/><input th:id="taskId" th:value="${task.taskId}" type="hidden"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">任务内容：</label>
                <div class="col-sm-9">
                    <textarea type="text" style="height: 100px" name="content" id="content" multiple th:field="*{task.content}" class="form-control" placeholder="请输入任务内容" required maxlength="255"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script type="text/javascript">
    var prefix = ctx + "system/task";
    var fileName="";
    var url="";
    var file="";
    $("#datetimepicker-startTime").datetimepicker();
    $("#datetimepicker-endTime").datetimepicker();

    function getExecutor() {
        $.ajax({
            url: "/system/dept/selectCompAll",
            success: function (result) {
                $.each(result, function (index, value) {
                    var name = value.deptName;
                    var id = value.deptId;
                    $('#comp').append("<option value='" + id + "'>" + name + "</option>");
                });
                $("#comp").selectpicker('refresh');
            }
        });
        $("#comp").bind("change", function() {
            //刷新选中第一条空数据
            document.getElementById("dept").options.selectedIndex = 0;
            document.getElementById("executor").options.selectedIndex = 0;
            //只保留下拉框中第一条空数据
            document.getElementById("dept").options.length = 1;
            document.getElementById("executor").options.length = 1;
            $("#executor").selectpicker('refresh');
            var deptId = $(this).val(); //获取当前下拉框name属性的值
            console.log(deptId);
            $.ajax({
                type : "POST",
                url : "/system/dept/selectDeptAll",
                data : {
                    "deptId" : deptId
                },
                success : function(result) {
                    $.each(result, function (index, value) {
                        var name = value.deptName;
                        var id = value.deptId;
                        $('#dept').append("<option value='" + id + "'>" + name + "</option>");
                    });
                    $("#dept").selectpicker('refresh');
                },
            });
        });
        $("#dept").bind("change", function() {
            //刷新选中第一条空数据
            document.getElementById("executor").options.selectedIndex = 0;
            //只保留下拉框中第一条空数据
            document.getElementById("executor").options.length = 1;
            var deptId = $(this).val(); //获取当前下拉框name属性的值
            console.log(deptId);
            $.ajax({
                type : "POST",
                url : "/system/user/selectUsersBydeptId",
                data : {
                    "deptId" : deptId
                },
                success : function(result) {
                    $.each(result, function (index, value) {
                        var name = value.userName;
                        var id = value.userId;
                        $('#executor').append("<option value='" + id + "'>" + name + "</option>");
                    });
                    $("#executor").selectpicker('refresh');
                },
            });
        });
    }
    getExecutor();

    // 上传文件
    function uploadFile() {
        var formData = new FormData();
        if ($('#filePath')[0].files[0] == null) {
            return false;
        }
        file = $('#filePath')[0].files[0].name;
        formData.append('fileName', $("#fileName").val());
        formData.append('file', $('#filePath')[0].files[0]);
        $.ajax({
            url: ctx + "common/upload",
            type: 'post',
            cache: false,
            async: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                fileName = result.fileName;
                url = result.url;
                if (result) {
                    parent.$.modal.msgSuccess(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    $("#form-task-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            file = $('#file').val();
            var taskId = $('#taskId').val();
            uploadFile();
            $.operate.save(prefix + "/edit", $('#form-task-edit').serialize()+"&file="+file+"&fileName="+fileName+"&url="+url+"&taskId="+taskId);
        }
    }

</script>
</body>
</html>
